<template>
    <div>
        <Card :padding="5">
            <span>产品型号: {{data.product_name}}</span>
            <span style='float: right'>设备SN: {{data.sn}}</span>
        </Card>

        <div class="title">基本信息</div>

        <Row class-name="info_line" justify="center" type="flex">
            <Col span="7">城市 / 区县: {{data.city}} {{data.district}}</Col>
            <Col span="7">房源编号: {{data.home_name}}</Col>
            <Col span="7">购买方式: {{data.distribution_channel === 1 ? '线上销售' : '合同采购'}}</Col>
        </Row>

        <Row class-name="info_line" justify="center" type="flex">
            <Col span="7">房源地址: {{data.address}}</Col>
            <Col span="7">房间号: {{data.room_name}}</Col>
            <Col span="7">保修期:
                <span v-if="data.guarantee_begin">保期内({{data.guarantee_begin}} 至 {{data.guarantee_end}})</span>
            </Col>
        </Row>

        <Row class-name="info_line" justify="center" type="flex">
            <Col span="7">交付时间: {{data.bill_time | date('YYYY-MM-DD HH:mm')}}</Col>
            <Col span="7">设备状态: {{data.dev_state}}</Col>
            <Col span="7">绑定方: {{data.bind_channel === 1 ? '云丁绑定' : '商户绑定'}}</Col>
        </Row>

        <div class="title">变更记录</div>

        <Steps :current="0" class="mystep" direction="vertical" v-if="history.length">
            <Step :content="item.ctx" :key="item.id" :title="item.time" icon="checkmark-circled" v-for="item in history"></Step>
        </Steps>
        <div v-else style="padding:20px">暂无</div>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'

export default {
  props: {
    sn: [Number, String],
    id: Number
  },
  data () {
    return {
      step_list: [
        {
          time: '',
          info: ''
        }
      ],
      data: {},
      history: []
    }
  },
  computed: {},

  mounted () {
    this.getData()
    this.getHistory()
  },

  methods: {
    getData () {
      http.request(this, api.device_detail, [this.id], null, res => {
        res.dev_state = ''
        switch (res.state) {
          case 1:
            res.dev_state = '待交付'
            break
          case 2:
            res.dev_state = '已交付已绑定'
            break
          case 3:
            res.dev_state = '已下线被替换'
            break
          case 4:
            res.dev_state = '已下线被退货'
            break
          case 5:
            res.dev_state = '已交付被丢失'
            break
          case 6:
            res.dev_state = '已交付被拆回'
            break
          case 7:
            res.dev_state = '已交付被解绑'
            break
        }
        this.data = res
      })
    },
    getHistory () {
      http.request(this, api.device_history, [this.id], null, res => {
        res.forEach(item => {
          item.info = item.info || {}
          let date = new Date(item.updated_at)
          item.time = `${date.Format('YYYY-MM-DD HH:mm')}`

          let guarantee_end = item.info.guarantee_end && new Date(item.info.guarantee_end)

          switch (item.type) {
            case 1:
              if (item.ticket_id) {
                item.ctx = `【设备绑定】 由安装师傅【${item.operator.name}】绑定, ${this.getOrderType(
                  item.info.service_type
                )}编号: ${item.info.ticket_sn}`
              } else {
                item.ctx = `【设备绑定】 由公寓人员【${item.operator.name}】绑定`
              }
              break
            case 2:
              if (item.operator && item.operator.name) {
                item.ctx = `【设备交付】 由公寓人员【${item.operator.name}】验收`
              } else {
                item.ctx = '【设备交付】 系统自动验收'
              }
              break
            case 3:
              item.ctx = `【设备被替换】 由安装师傅【${item.operator.name}】将此设备被替换为${item.info.product_name} - ${
                item.info.model_name
              }(SN:${item.info.sn}), ${this.getOrderType(item.info.service_type)}编号: ${item.info.ticket_sn}`
              break
            case 4:
              item.ctx = `【设备退货】 由安装师傅【${item.operator.name}】操作, ${this.getOrderType(
                item.info.service_type
              )}编号: ${item.info.ticket_sn}`
              break
            case 5:
              item.ctx = `【设备丢失】 由安装师傅【${item.operator.name}】操作, ${this.getOrderType(
                item.info.service_type
              )}编号: ${item.info.ticket_sn}`
              break
            case 6:
              item.ctx = `【设备拆回】 由安装师傅【${item.operator.name}】操作, ${this.getOrderType(
                item.info.service_type
              )}编号: ${item.info.ticket_sn}`
              break
            case 7:
              if (item.ticket_id) {
                item.ctx = `【设备解绑】 由安装师傅【${item.operator.name}】解绑, ${this.getOrderType(
                  item.info.service_type
                )}编号: ${item.info.ticket_sn}`
              } else {
                item.ctx = `【设备解绑】 由公寓人员【${item.operator.name}】解绑`
              }
              break
            case 8:
              item.ctx = `【设备替换】 安装师傅【${item.operator.name}】用此设备替换${item.info.product_name} - ${
                item.info.model_name
              }(SN:${item.info.sn}), ${this.getOrderType(item.info.service_type)}编号: ${item.info.ticket_sn}`
              break
            case 9:
              if (item.ticket_id) {
                item.ctx = `【设备重绑】 由安装师傅【${item.operator.name}】重绑, ${this.getOrderType(
                  item.info.service_type
                )}编号: ${item.info.ticket_sn}`
              } else {
                item.ctx = `【设备重绑】 由公寓人员【${item.operator.name}】重绑`
              }
              break
            default:
              if (item.ticket_id) {
                item.ctx = `【设备延保】 由安装师傅将保修期延长至${guarantee_end.Format('YYYY-MM-DD HH:mm')}`
              } else {
                item.ctx = `【设备延保】 由云丁人员将保修期延长至${guarantee_end.Format('YYYY-MM-DD HH:mm')}`
              }
          }
        })

        this.history = res
      })
    },
    // 获取工单类型
    getOrderType (type) {
      let text = ''
      switch (type) {
        case 1:
          text = '安装'
          break
        case 2:
          text = '维修'
          break
        case 3:
          text = '拆回'
          break
        case 4:
          text = '重装'
          break
      }
      return text
    },
    // 获取操作类型
    getType (type) {
      let text = ''
      switch (type) {
        case 1:
          text = '绑定'
          break
        case 2:
          text = '交付'
          break
        case 3:
          text = '被替换'
          break
        case 4:
          text = '退货'
          break
        case 5:
          text = '丢失'
          break
        case 6:
          text = '拆回'
          break
        case 7:
          text = '解绑'
          break
        case 8:
          text = '替换'
          break
        case 9:
          text = '重绑'
          break
      }
      return text
    },
    // 工单类型
    getServiceType (type) {
      let text = ''
      switch (type) {
        case 1:
          text = '安装'
          break
        case 2:
          text = '维修'
          break
        case 3:
          text = '拆回'
          break
        case 4:
          text = '重装'
          break
      }
      return text
    }
  }
}
</script>

<style lang="less" scoped>
.title {
    padding: 20px 0 10px 0;
    border-bottom: 1px solid #bbbec4;
}
.info_line {
    margin: 10px 0;
}
.mystep {
    padding-left: 10%;
    margin-top: 20px;
}
</style>